<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./fonts/icomoon/style.css">
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    
    ul {
        list-style: none;
    }
    
    a {
        text-decoration: none;
    }
    
    header {
        width: 100%;
        height: 40px;
        background-color: #01204f;
    }
    
    ul>li {
        float: left;
        line-height: 40px;
    }
    
    div {
        /* box-sizing: border-box; */
        width: 1200px;
        height: 40px;
        text-align: center;
        /* margin: 0 auto; */
        transform: translate(400px, 0);
    }
    
    header li a {
        margin: 0 20px 0;
        color: #fff;
        font-weight: 700;
    }
    
    header li:hover {
        background-color: #c00;
    }
    
    ul li:nth-of-type(1) {
        background-color: #c00;
    }
    
    ul li:first-child::before {
        margin-left: 16px;
        content: "";
        font-family: "icomoon";
        color: #fff;
        font-size: 15px;
    }
    
    ul li:first-child a {
        margin: 0 20px 0 0;
    }
</style>

<body>
    <header>
        <div>
            <ul>
                <li>
                    <a href="#">首页</a>
                </li>
                <li> <a href="#">国际</a> </li>
                <li> <a href="#">军事</a> </li>
                <li> <a href="#">财经</a> </li>
                <li> <a href="#">娱乐</a> </li>
                <li> <a href="#">体育</a> </li>
                <li> <a href="#">互联网</a> </li>
                <li> <a href="#">科技</a> </li>
                <li> <a href="#">游戏</a> </li>
                <li> <a href="#">女人</a> </li>
                <li> <a href="#">汽车</a> </li>
                <li> <a href="#">房产</a> </li>
            </ul>
        </div>
        <div class="move"></div>
    </header>
</body>

</html>